<template>
  <van-popup class="popup-img-preview" :show="visible" round :position="position" :z-index="zIndex" :closeable="closeable" :closeOnClickOverlay="closeOverlay" @click-overlay="clickOverlay" @close="clickClose"> 
    <view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" :autoplay="false" circular="true" indicator-active-color="#ffffff" :current="active" :style="{height: height}">
				<swiper-item v-for="(item,index) in imgList" :key="index">
					<image mode="aspectFit" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
  </van-popup>
</template>

<script>
export default {
  props:{
      title: {
          type: String,
      },
      position: {
        type: String,
        default: () => 'center'
      },
      zIndex: {
        type: Number,
        default: () => 100,
      },
      closeable: {
        type: Boolean,
        default: () => true,
      },
      closeOverlay:{
        type: Boolean,
        default: () => false,
      },
      options:{
        type: Boolean
      }
  },
  data(){
      return{
          visible: false,
          height:null,
          active: 0,
          imgList:[
            'https://www.likesport.top/public/upload/final/projectName_20230503094428_nu3H7r12sPrgc241cc55554496e5a5f98bed88435b92.png',
            'https://www.likesport.top/public/upload/final/projectName_20230503094621_fUWgmHXULVdo8df02565bae37804c6cee2995e6e41c9.png',
          ],
      }
  },
  methods:{
    init(index, list){
      this.active = index;
      if(this.options){
        this.imgList = list.map(item => {
          return item[this.options.url];
        })
      }else{
        this.imgList = list;
      }      
      this.getHeight();
      this.visible = true; 
    },
    getHeight(){
      uni.getSystemInfo({
        success: res => {
          this.height = res.windowHeight + 'px';
        }
      })
    },
    clickOverlay(){
      if(this.closeOverlay){
        this.visible = false;
        this.$emit('close');
      }
    },
    clickClose(){
      this.visible = false;
      this.$emit('close');
    }
  }
}
</script>